@layout("/common/_container.html"){
<style>
    ul {
        padding: 0;
        margin: 0;
    }

    .basic {
        padding-left: 15px;
    }

    .basic > ul {
        display: flex;
        padding-top: 20px;
    }

    .basic > ul > li {
        flex: 1;
    }

    .basic .ul_line span {
        display: inline-block;
        width: 21%;
    }

    .basic .ul_line1 span {
        display: inline-block;
        width: 30%;
    }

    .input_style {
        width: 50%;
        height: 35px;
        border: 1px solid #cccccc;
        border-radius: 3px;
        padding-left: 10px;
    }

    .ul_line > li {
        line-height: 66px;
    }

    .title_h {
        border-bottom: 1px solid #dddddd;
        margin: 0;
        padding-bottom: 10px;
        text-indent: 1em
    }

    .select_style {
        width: 60%;
        height: 35px;
        border: 1px solid #cccccc;
        border-radius: 3px;
    }

    .btnBox {
        float: right;
        width: 23%;
    }

    .btnBox button {
        background: #30add1;
        color: white;
        width: 96px;
    }

    .basic .ul_line .asterisk {
        color: red;
        display: inline-block;
        width: 10px;
        margin-left: 5px;
    }
</style>
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal" id="reservationsInfoForm">
            <div style="display: none">
                <input type="hidden" id="id" value="">
                <input type="hidden" id="oneChannelValue" value="">
                <input type="hidden" id="twoChannelValue" value="">
                <input type="hidden" id="thrChannelValue" value="">
                <input type="hidden" id="oneMediumValue" value="">
                <input type="hidden" id="twoMediumValue" value="">
                <input type="hidden" id="thrMediumValue" value="">
            </div>
            <!--基本信息-->
            <div class="row" style="padding-bottom: 40px;">
                <h4 class="title_h">基本信息</h4>
                <div class="basic">
                    <ul>
                        <li>
                            <ul class="ul_line">
                                <li><span>预约号<span class="asterisk">*</span></span>
                                    <input id="reservationsNum" name="预约号" type="text" class="input_style">
                                </li>
                                <li><span>姓名<span class="asterisk">*</span></span>
                                    <input id="customerName" name="姓名" type="text" class="input_style">
                                </li>
                                <li><span>电话<span class="asterisk">*</span></span>
                                    <input id="customerPhone" name="电话*" type="text" class="input_style">
                                    <select name="phoneSharShip" id="phoneSharShip" style="width: 90px;"
                                            class="input_style">
                                        <option value="本人">本人</option>
                                        <option value="爸爸">爸爸</option>
                                        <option value="妈妈">妈妈</option>
                                        <option value="儿子">儿子</option>
                                        <option value="女儿">女儿</option>
                                        <option value="朋友">朋友</option>
                                        <option value="其他">其他</option>
                                    </select>
                                </li>
                                <li><span>年龄</span>
                                    <input id="customerAge" name="年龄" type="text" class="input_style"
                                           style="width: 80px;">
                                </li>
                                <li>
                                    <span>其他联系方式</span>
                                    <input id="otherContact" name="其他联系方式" type="text" class="input_style"
                                           style="width:70%;">
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul class="ul_line">
                                <li><span>性别</span>
                                    <input type="radio" name="sex" value="1"
                                           style="width: 12px;margin: 0;vertical-align: middle;"><span
                                            style="width: 25px;margin-left: 5px;">男</span>
                                    <input type="radio" name="sex" value="2"
                                           style="width: 12px;margin: 0;vertical-align: middle;"><span
                                            style="width: 25px;margin-left: 5px;">女</span>
                                    <input type="radio" name="sex" value="0" checked="checked"
                                           style="width: 12px;margin: 0;vertical-align: middle;"><span
                                            style="width: 20%;margin-left: 5px;">未知</span>
                                </li>
                                <li><span>状态</span>
                                    <select id="statuss" name="statuss" class="input_style" style="width: 80px;">
                                        <option value="预约">预约</option>
                                        <option value="待定">待定</option>
                                        <option value="跟进">跟进</option>
                                    </select>
                                </li>
                                <li><span>QQ</span>
                                    <input id="qqNumber" name="QQ号" type="text" class="input_style">
                                </li>
                                <li><span>微信</span>
                                    <input id="wechatNumber" name="微信号" type="text" class="input_style">
                                </li>
                                <li><span>关键词</span>
                                    <input id="keyWord" name="关键词" type="text" class="input_style">
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <div style="padding-top: 12px;">

                    </div>

                </div>
            </div>
            <!--项目信息-->
            <div class="row" style="padding-bottom: 40px;">
                <h4 class="title_h">项目信息</h4>
                <div class="basic">
                    <ul>
                        <li>
                            <ul class="ul_line ul_line1">
                                <li><span>预约项目<span class="asterisk">*</span></span>
                                    <select id="appointmentPayService" name="appointmentPayService"
                                            class="select_style"></select>
                                </li>
                                <li><span>预约门诊</span>
                                    <select id="outpatientName" name="outpatientName" class="select_style"></select>
                                </li>
                                <li><span>是否大单</span>
                                    <select id="isLarge" name="是否大单" class="select_style">
                                        <option value="1">是</option>
                                        <option value="2">否</option>
                                    </select>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul class="ul_line ul_line1">
                                <li><span>预约时间<span class="asterisk">*</span></span>
                                    <input name="appointmentArrivalTime" id="appointmentArrivalTime"
                                           class="select_style"
                                           onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"/>
                                </li>
                                <li><span>建档人</span>
                                    <input id="archiving" name="建档人*" value="${userName}" class="select_style"
                                           readonly="readonly"/>
                                </li>
                                <li><span>经济能力</span>
                                    <select id="economicAbility" name="经济能力" class="select_style"></select>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul class="ul_line ul_line1">
                                <li><span>访问病种</span>
                                    <select id="accessDisease" name="accessDisease" class="select_style">
                                        <option value="">请选择</option>
                                        <option value="种植">种植</option>
                                        <option value="正畸">正畸</option>
                                        <option value="修复">修复</option>
                                        <option value="美白">美白</option>
                                        <option value="拔牙智齿">拔牙智齿</option>
                                        <option value="牙周">牙周</option>
                                        <option value="洗牙洁牙">洗牙洁牙</option>
                                        <option value="医院类">医院类</option>
                                        <option value="儿童齿科">儿童齿科</option>
                                    </select>
                                </li>
                                <li><span>障碍点</span>
                                    <input id="obstaclePoint" name="障碍点" class="select_style"/>
                                </li>
                                <li><span>职业</span>
                                    <select id="occupation" name="职业" class="select_style"></select>
                                </li>
                            </ul>
                        </li>
                    </ul>

                    <div style="padding:12px 0 22px;">
                        <span style="display: inline-block;width: 10%;">渠道</span>
                        <select id="oneChannel" name="oneChannel" class="select_style" style="width: 20%"></select>
                        <select id="twoChannel" name="twoChannel" class="select_style" style="width: 20%"></select>
                        <select id="thrChannel" name="thrChannel" class="select_style" style="width: 20%"></select>
                    </div>
                    <div>
                        <span style="display: inline-block;width: 10%;">媒介</span>
                        <select id="oneMedium" name="oneMedium" class="select_style" style="width: 20%"></select>
                        <select id="twoMedium" name="twoMedium" class="select_style" style="width: 20%"></select>
                        <select id="thrMedium" name="thrMedium" class="select_style" style="width: 20%"></select>
                    </div>
                </div>
            </div>
            <!--其他信息-->
            <div class="row" style="padding-bottom: 15px;">
                <h4 class="title_h">其他信息</h4>
                <div class="basic">
                    <ul>
                        <li>
                            <p>备注</p>
                            <textarea id="remarks" name="remarks" rows="8" style="width: 95%"></textarea>
                        </li>
                        <li>
                            <p>聊天记录</p>
                            <textarea id="content" name="content" rows="8" style="width: 95%"></textarea>
                        </li>
                    </ul>
                </div>
            </div>
            <!--button按钮-->
            <div class="row clearfix">
                <div class="btnBox">
                    <button type="button" class="btn" onclick="ReservationsInfoDlg.addSubmit()">提交</button>
                    <button type="button" class="btn" style="background:#da6792;" onclick="ReservationsInfoDlg.close()">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/modular/marketing/reservations/reservations_info.js"></script>
<script src="${ctxPath}/static/js/common/jsChannel.js"></script>
<script src="${ctxPath}/static/js/common/jsMedium.js"></script>
<script type="text/javascript">
    var oneChanneli = document.getElementById("oneChannelValue").value;
    var twoChanneli = document.getElementById("twoChannelValue").value;
    var thrChanneli = document.getElementById("thrChannelValue").value;
    var oneMediumi = document.getElementById("oneMediumValue").value;
    var twoMediumi = document.getElementById("twoMediumValue").value;
    var thrMediumi = document.getElementById("thrMediumValue").value;
    var ChannelList;
    //初始化下拉渠道列表
    $.post(Feng.ctxPath + "/channel/getChannels", function (data) {
        ChannelList = data;
        channelInit('oneChannel', 'twoChannel', 'thrChannel');
    }, "json");
    //初始化下拉媒介列表
    $.post(Feng.ctxPath + "/medium/getMedium", function (data) {
        MediumList = data;
        mediumInit('oneMedium', 'twoMedium', 'thrMedium');
    }, "json");
    //初始化下拉职业列表
    $.post(Feng.ctxPath + "/occupation/getList", function (data) {
        var txt = '<option value="">--请选择职业--</option>';
        for (var i = 0; i < data.length; i++) {
            txt += '<option value="' + data[i].occupation + '">' + data[i].occupation + '</option>';
        }
         document.getElementById('occupation').innerHTML = txt;
        //状态单选
        var seleteoccupation = $('#occupationValue').val();
        if (seleteoccupation != "") {
            $("#occupation option[value=" + seleteoccupation + "]").attr("selected", "selected");
        }
    }, "json");
    //建档人，跟进人功能
</script>
@}